<template>
  <div class="filelist">
    <a-list :data-source="list">
      <!-- ----------- -->
      <a-list-item slot="renderItem" slot-scope="item">
        <div class="list-row">
          <a-avatar
            class="list-icon"
            shape="square"
            size="large"
            :style="{ backgroundColor: '#3296f8', verticalAlign: 'middle' }"
          >
            {{ item.fileType }}
          </a-avatar>
          <div class="list-c">
            <div class="list-c-filename">
              {{ item.fileName }}
            </div>
            <div class="list-c-filesize">
              {{ item.fileSize }}
            </div>
          </div>
          <div @click="$emit('fileClick', item)" :class="{ 'list-r': 1 }">
            <a-icon
              :style="{ 'font-size': '30px' }"
              class="list-more-icon"
              type="more"
            />
          </div>
        </div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props:{
    list:{
      type:Array,
      default(){
        return []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.filelist {
  /deep/ .ant-list {
    padding: 11px 12px;
  }
  .list-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .list-icon {
      margin-right: 12px;
      width: 40px;
    }
    .list-c {
      width: calc(100% - 80px);

      .list-c-filename {
        font-size: 17px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
      .list-c-filesize {
        margin-top: 5px;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
    .list-r {
      margin-right: -6px;
    }
  }
}
</style>
